<template>
  <span class="hover-box">
    <span class="comparison" @click="handleComparison">
      <img :src="sort" :draggable="false" />
      <span style="margin: 0 8px">{{ title }}</span>
    </span>
    <HDescription placement="topLeft">
      <template #content>
        <div class="hover-tooltips">
          <span style="color: #2b63a1" class="items-tooltips"> <MinusOutlined />持平</span>
          <span style="color: #ff522b" class="items-tooltips"> <FallOutlined />下降</span>
          <span style="color: #4db803" class="items-tooltips"> <RiseOutlined />上升</span>
        </div>
      </template>
    </HDescription>
  </span>
</template>

<script setup lang="ts">
  import { ref, computed, unref } from 'vue';
  import { MinusOutlined, FallOutlined, RiseOutlined } from '@ant-design/icons-vue';
  import { HDescription } from '/@/components/HDescription';
  import sort from '/@/assets/images/sort-01.png';

  const handleFlag = ref(false);
  const emit = defineEmits(['change']);

  const title = computed(() => (unref(handleFlag) ? '收起对比' : ' 对比上月'));

  const handleComparison = () => {
    handleFlag.value = !handleFlag.value;

    emit('change', unref(handleFlag));
  };
</script>

<style lang="less" scoped>
  .hover-box {
    color: #1153d8;
    margin-left: 8px;
    font-size: 14px;

    img {
      display: inline-block;
    }
  }
</style>
<style lang="less">
  .comparison {
    cursor: pointer;
  }

  .hover-tooltips {
    display: flex;

    .items-tooltips {
      margin-right: 24px;
      font-size: 14px;

      span {
        margin-right: 5px;
      }
    }
  }
</style>
